/* === Responsive (Mobile) === */
@media (max-width: 990px) {
    .navbar { display: none;
   width:500px; 
 } /* hide nav */
   .menu-toggle { display: block;
   height: fit-content;} /* show hamburger */
   header{
     height:250px;
   }
 
   .sidebar{
     width: 500px;
     font-size: 45px;
   }
   li a{
     border-top: none;
   }
   .loginbutton{
    background:linear-gradient(90deg, blue, black);
    width: 200px;
  }
   .sidebar-close{
     font-size: 75px;
   }
   .tag{
     font-size:35px;
     margin-bottom: 300px;
   }
   .hero{
     height: 80vh;
   }
   .indicator-container{
     margin-top: 20px;
   }
   .hero-content{
     font-size: 52px;
     margin-top: 00px;
   }
   .about-cards {
     display: block;
   }
   .about-cards .card{
     width:100%;
     margin-left:0px;
   }
   .abouth2{
     font-size: 55px;
   }
   /* === Projects Section === */
 #projects{
   height: 130vh;
 }
   #projects .grid{
     display: block;
     width:900px;
     height: 8%;
     margin-left: 20px;
   }
   .Projectheading{
     font-size: 55px;
   }
 
   .card_project{
     text-align: center;
     font-size: 35px;
     height: 800px;
     margin-top: 30px;
     width: 100%;
   }
   .card_project img{
     height:500px;
     background-size: cover;
   }
   .card_project h3{
     font-size: 35px;
   }
   #services{
     height: 90vh;
   }
   .services-heading{
     font-size: 55px;
   }
   .sub{
     font-size: 35px;
   }
   .service_container{
     display: block;
   }
   .grid.cols-3{
     display: block;
   }
   .card_service{
     text-align: center;
     align-content: center;
     font-size: 40px;
     margin-top:20px;
     height: 500px;
   }
   .contacth2{
     font-size: 55px;
   }
   .container_contact{
     display: block;
   }
   .form{
     height: 30vh;
     width: 150%;
   }
   .placeholder{
     width: 100%;
     font-size: 35px;
   }
   .btn2{
     width:100px;
     font-size: 25px;
     height: 40px;
   }
   .footer-container{
     display: block;
     font-size: 34px;
     text-align:left;
   }
   .footer-box{
    text-align: center;
     margin-top: 40px;
     margin-left: 0px;
   }
    .footerul{
      text-align: center;
      gap: 30px;
      display: flex;
    }
   .footer-bottom{
     font-size: 45px;
   }

 }